<script>
import InstitutionSelect from '@/components/institutionSelect/institutionSelect.vue'
import { mapState } from 'vuex'

export default {
  name: 'chauBasicForm',
  data() {
    return {
      formData: {}
    }
  },
  methods: {
    /*
  * 获取司机详情的回调函数
  *  */
    async fetchChauffeurDetail() {
      try {
        const detail = await this.$store.dispatch('chauffeurStore/fetchChauffeurDetailAction', this.id)
        this.formData = detail
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    }
  },
  mounted() {
    this.fetchChauffeurDetail()
  },
  components: { InstitutionSelect }
}
</script>

<template>
  <div class="chau-basic-form">
    <el-form inline :model="formData">
      <el-form-item label="员工编号：">
        <el-input placeholder="请输入员工编号" v-model="formData.userId"></el-input>
      </el-form-item>
      <el-form-item label="司机名称：">
        <el-input placeholder="请输入司机名称" v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="所属机构：">
        <institution-select :placeholder="formData.agency.name"></institution-select>
      </el-form-item>
      <el-form-item label="司机电话：">
        <el-input placeholder="请输入司机电话" v-model="formData.mobile"></el-input>
      </el-form-item>
      <el-form-item label="司机年龄：">
        <el-input placeholder="请输入司机年龄" v-model="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="司机状态">
        <el-switch v-model="formData.workStatus" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.el-form-item {
  width: 380px;
  margin: 8px 0;

  .el-input {
    width: 130%;
  }
}
</style>
